<template>
	<div class="mine">
		<div id="mineTop">
			<span class="login">登陆/注册</span>
		</div>
		<div id="photo">
			<img src="../../assets/img1/defhead.png"/>
		</div>
		<div id="fordl">
		<dl>
			<dt>0</dt>
			<dd>收藏的商品</dd>
		</dl>
		<dl>
			<dt>0</dt>
			<dd>关注的店铺</dd>
		</dl>
		<dl>
			<dt>0</dt>
			<dd>我的足迹</dd>
		</dl>
		</div>
		<div class="myding">
			<img style="vertical-align: middle;" src="../../assets/img1/wd-012-1.png"/><div style="vertical-align: middle;line-height: 0.7rem;">我的订单</div> <span>查看全部购买商品></span>
		</div>
		<div id="paymoney">
			<dl>
				<dt><img src="../../assets/img1/fukuan-07.png"/></dt>
				<dd>待付款</dd>
			</dl>
			<dl>
				<dt><img src="../../assets/img1/shouhuo-07.png"/></dt>
				<dd>待收货</dd>
			</dl>
			<dl>
				<dt><img src="../../assets/img1/pd-return.png"/></dt>
			<dd>退换货</dd>
			</dl>
		</div>
		<div class="gray"></div>
		<div class="myding">
			<img style="vertical-align: middle;" src="../../assets/img1/wd-012-02.png"/><div style="vertical-align: middle;line-height: 0.7rem;">我的礼券</div> <span class="right">></span>
		</div>
		<div class="myding">
			<img style="vertical-align: middle;" src="../../assets/img1/wd-012-03.png"/><div style="vertical-align: middle;line-height: 0.7rem;">积分抵现</div> <span class="right">></span>
		</div>
		<div class="myding">
			<img style="vertical-align: middle;" src="../../assets/img1/111.png"/><div style="vertical-align: middle;line-height: 0.7rem;">电子书架</div> <span class="right">></span>
		</div>
		<div class="myding">
			<img style="vertical-align: middle;" src="../../assets/img1/wd-012-04.png"/><div style="vertical-align: middle;line-height: 0.7rem;">我的礼品</div> <span class="right">></span>
		</div>
		<div class="myding">
			<img style="vertical-align: middle;" src="../../assets/img1/wd-012-05.png"/><div style="vertical-align: middle;line-height: 0.7rem;">收货地址</div> <span class="right">></span>
		</div>
		<div class="gray1">为你推荐</div>
	     <div class="manybooks">
	     	<div class="singlebook"  v-for="c in foru">
	     		<img class="slbimg" :src="c.img" alt="暂无此图"/>
	     		<span id="slbspan">{{c.title}}</span>
	     		<div>￥19.9</div>
	     	</div>
	     </div>
	</div>
	</div>
</template>

<script>
	
	
	export default {
		data(){
			return {
				dataList: [],
				foru:[]
			}
		},
		methods:{
			request(){
				this.$http({
					url: 'http://localhost:8080/reqmine',
					params: {
						
					},
					method: 'GET'
				}).then(function(req){
					// console.log(req);
					//var result = JSON.parse(req.body);
					//this.dataList = result.data;
					console.log(req)
					this.foru = req.body.result.data;
				});
			}
		},
		mounted(){
			this.request();
		},
	}
	
</script>

<style>
	header{
		display: flex;
	}
	.mine{
		width: 10rem;
	}
	#mineTop{
		background-color: darkslategray;
		width: 10rem;
		height: 3rem;
	}
	.login{
		display: inline-block;
		color: white;
		border: solid 0.046875rem white;
		width: 3rem;
		height: 1rem;
		text-align: center;
		font-size: 0.46875rem;
		line-height: 1rem;
		font-weight: bold;
		border-radius: 0.15625rem;
		margin-left: 3.5rem;
		margin-top: 1rem;
	}
	#photo img{
		width: 2.0625rem;
		height: 2.0625rem;
		position: absolute;
		top: 1.4rem;
		left: 0.3rem;
	}
	#fordl{
		display: flex;
		margin-top: 0.3125rem;
		border-bottom:solid 1px lightgray ;
	}
	
	#fordl dl{
		text-align: center;
		width: 2.5rem;
		border-right: solid 1px lightgray;
	}
	#fordl dl:first-child{
		margin-left: 2.5rem;
	}
	#fordl dl:last-child{
		border-style: none;
	}
	#fordl dl dd{
		height: 0.6rem;
	}
	.myding{
		display: flex;
		padding-top: 0.1rem;
		height: 0.9375rem;
		font-size:0.34375rem;
		border-bottom: solid 0.015625rem lightgray;
	}
	.myding img{
		margin-left: 0.46875rem;
		width: 0.6875rem;
		height: 0.6875rem;
		vertical-align: middle;
		margin-right: 0.2rem;
	}
	
	.myding span{
		display: inline-block;
		margin-left: 4.125rem;
		color: gray;
		margin-top: 0.2rem;
	}
	#paymoney{
		display: flex;
		justify-content: space-around;
		text-align: center;
		margin-top: 0.3125rem;
	}
	.gray{
			width: 10rem;
			height: 0.3125rem;
			background-color: #f5f1f3;
		}
    section{
    	margin-top: -0.1rem;
    }
    .right{
    	display: inline-block;
    	margin-left: 10rem;
    }
    	.gray1{
			width: 10rem;
			height: 0.625rem;
			background-color: #f5f1f3;
			background-image: url(../../assets/img1/yes.png);
			background-repeat: no-repeat;
			background-position: 3rem 0;
			text-align: center;
			font-size: 0.40625rem;
		}
		
	.singlebook{
		width: 5rem;
		height: 8rem;
	}
	.slbimg{
		width: 5rem;
		height: 6rem;
	}
	#slbspan{
		width: 5rem;
		text-align: center;
		font-size: 0.46875rem;
		font-weight: bold;
	}
	.manybooks{
		width: 10rem;
		display: flex;
		flex-wrap: wrap;
		height: auto;
	}
	.singlebook div{
		font-size: 0.4375rem;
		color: red;
		font-weight: bold;
	}
</style>